문서 객체 모델

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

문서 객체 모델(DOM)은 HTML, XML 문서를 트리 구조로 표현하는 프로그래밍 인터페이스이다. 웹 브라우저는 DOM을 사용하여 HTML 문서를 파싱하고, 자바스크립트와 같은 언어를 통해 문서의 구조, 스타일, 내용을 동적으로 접근하고 수정할 수 있게 한다. DOM은 역사적으로 브라우저 간의 경쟁 속에서 발전해 왔으며, 레거시 DOM, 중간 DOM을 거쳐 W3C 표준으로 정립되었다. 현재는 WHATWG에서 DOM Living Standard를 관리하며, DOM 레벨 1부터 4까지의 표준이 존재한다. DOM은 웹 브라우저, 자바스크립트, 웹 애플리케이션 등 다양한 분야에서 활용되며, 웹 페이지의 동적 조작과 웹 애플리케이션 개발에 필수적인 기술이다.

더 읽어볼만한 페이지

HTML - Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.
HTML - 폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
W3C 표준 - HTML
HTML은 웹 페이지 제작을 위한 표준 마크업 언어로서, 팀 버너스리가 제안하고 구현한 후 인터넷 발전과 함께 널리 사용되며, SGML에 기반하여 하이퍼텍스트 기능으로 다양한 콘텐츠를 표현하고 연결하며, W3C와 WHATWG에서 표준화를 진행하고 최신 버전은 HTML Living Standard이다.
W3C 표준 - 타임드 텍스트
타임드 텍스트는 영상이나 오디오 콘텐츠에 시간 정보를 담아 표현되는 텍스트로, 자막이나 캡션 등에 활용되며 TTML, WebVTT 등의 표준이 존재한다.
XML 기반 표준 - XAML
XAML은 마이크로소프트에서 개발한 XML 기반의 마크업 언어로, 사용자 인터페이스, 데이터 바인딩, 이벤트 처리 등을 정의하며 WPF, Silverlight, WF, WinRT API 앱, Xamarin.Forms 등에서 UI 개발에 널리 사용된다.
XML 기반 표준 - 아톰 (표준)
Atom은 웹 사이트 업데이트 정보와 콘텐츠 배포를 위한 XML 기반 문서 형식으로, Atom 배포 형식과 Atom 출판 프로토콜로 구성되어 있으며, RSS를 대체하기 위해 고안되었고 국제화 지원 및 모듈성에서 차이를 보인다.

문서 객체 모델
개요
HTML 문서 내의 DOM 계층의 예
정의	프로그램과 스크립트가 문서의 내용, 구조 및 스타일을 동적으로 액세스하고 업데이트할 수 있도록 하는 플랫폼 및 언어 중립적 인터페이스
약칭	DOM
표준
최초 게시일	1998년 10월 1일
최신 버전	DOM4
최신 버전 날짜	2015년 11월 19일
관련 표준	WHATWG DOM Living Standard W3C DOM4
조직	월드 와이드 웹 컨소시엄 WHATWG

2. 역사

문서 객체 모델(DOM)의 역사는 1990년대 후반 넷스케이프 내비게이터와 인터넷 익스플로러 간의 '브라우저 전쟁'과 밀접하게 연관되어 있다. 이 시기 각 브라우저는 자체적인 DOM을 구현하여 호환성 문제가 발생했다.

초창기 자바스크립트와 J스크립트는 웹 페이지의 동적 기능을 제한적으로 지원했으며, 이를 "레거시 DOM" 또는 "DOM 레벨 0"이라 불렀다. 이후 넷스케이프와 마이크로소프트는 각자 동적 HTML(DHTML)을 지원하는 브라우저를 출시했지만, 이들 간의 DOM 구현 방식 또한 서로 달랐다. (이 시기의 DOM을 "중간 DOM"이라고 한다.)

ECMA스크립트가 표준화되면서, 월드 와이드 웹 컨소시엄(W3C)은 표준 DOM 사양을 만들기 시작했다. 1998년 말, "DOM 레벨 1"이 W3C 권고안으로 발표되었다. 2005년에 이르러서는 인터넷 익스플로러 6, 오페라, 사파리, 게코 기반 브라우저 등을 포함한 대부분의 주요 웹 브라우저들이 W3C DOM을 잘 지원하게 되었다.

W3C DOM 작업반은 2004년에 해산되었고, 이후 DOM 표준 개발은 WHATWG가 주도하고 있다. W3C는 WHATWG 표준의 스냅샷을 기반으로 새로운 권고안을 발표하고 있다.

2. 1. 레거시 DOM (DOM 레벨 0)

자바스크립트는 1995년 넷스케이프 커뮤니케이션스가 넷스케이프 내비게이터 2.0과 함께 출시했다. 마이크로소프트는 이듬해 인터넷 익스플로러 3과 함께 자바스크립트 재구현체인 J스크립트를 출시했다. JScript는 웹 개발자들이 클라이언트 사이드 상호작용을 구현한 웹 페이지를 만들 수 있게 했다. 이 언어들의 1세대에서는 사용자가 생성한 이벤트를 감지하고 HTML 문서를 수정하는 기능이 제한되었는데, 이를 "DOM 레벨 0", "레거시 DOM"이라고 불렀다. DOM 레벨 0을 위한 독립적인 표준은 개발되지 않았으나, HTML 4 사양에 부분적으로 기술되었다.

레거시 DOM은 접근 가능한 HTML 요소 종류가 제한적이었다. 폼, 링크, 이미지 요소들은 루트 문서 객체로 시작하는 계층 이름으로 참조할 수 있었다. 계층 이름은 경유되는 요소의 이름이나 일련의 색인을 이용할 수 있었다. 예를 들어, 폼 입력 요소는 `document.formName.inputName` 또는 `document.forms[0].elements[0]`으로 접근할 수 있었다.

레거시 DOM은 클라이언트 사이드 폼 유효성 검사 및 툴팁 생성을 위한 간단한 인터페이스 상호작용을 가능하게 했다.

2. 2. 중간 DOM

1997년, 넷스케이프와 마이크로소프트는 각각 넷스케이프 내비게이터 4.0과 인터넷 익스플로러 4.0을 출시하면서 동적 HTML(DHTML) 기능을 지원했다. DHTML은 로드된 HTML 문서를 변경할 수 있게 해 주었다. DHTML은 레거시 DOM 구현체에서 사용 가능했던 초기 문서 객체의 확장이 필요했다. JScript가 자바스크립트에 기반을 두었기 때문에 레거시 DOM 구현체들은 대체로 호환되었지만, DHTML DOM 확장은 각 브라우저 개발사가 병렬로 개발했기 때문에 호환되지 않는 상태로 유지되었다.^[1] 이러한 DOM 버전들은 "중간 DOM"(Intermediate DOM)이라는 이름으로 알려지게 되었다.^[1]

2. 3. W3C 표준화

ECMA스크립트의 표준화 이후, W3C DOM 워킹 그룹은 표준 DOM 사양의 초안 작성을 시작했다. "DOM 레벨 1"이라는 이름의 완성된 사양은 1998년 말 W3C 권고안이 되었다.^[24] 2005년, W3C DOM의 대부분이 마이크로소프트 인터넷 익스플로러 6(2001년부터), 오페라, 사파리, 게코 기반 브라우저(예: 모질라, 파이어폭스, 시몽키, 카미노)를 포함한 공통 ECMA스크립트 지원 브라우저에서 잘 지원되었다.^[24]

W3C의 DOM 작업반은 최종 권고안을 공개한 후 2004년에 해산되었다. 개발은 WHATWG로 이관되었고, 현재도 리빙 스탠다드로 유지되고 있다.^[24] 2009년에는 Web Applications 그룹이 W3C에서 DOM의 활동을 재편했다.^[25] 2013년에는 진전 지연과 HTML5의 출시 임박으로 인해, DOM Level 4의 사양은 HTML 작업반에 재할당되어 완성이 촉진되었다.^[26] 이후 2015년에는 Web Applications 그룹이 해산되었고, DOM의 관리는 Web Platform 그룹에 인계되었다.^[27] W3C는 2015년의 DOM Level 4 공개 이후, WHATWG의 표준을 기반으로 한 스냅샷으로부터 새로운 권고안을 작성하고 있다.

DOM Level 1은 HTML 또는 XML 문서 전체의 완전한 모델을 제공하며, 문서의 임의의 부분을 변경하는 수단도 포함하고 있었다.
DOM Level 2는 2000년 후반에 공개되었으며, `getElementById` 함수와 이벤트 모델, XML 네임스페이스 및 CSS 지원이 도입되었다.
DOM Level 3는 2004년 4월에 공개되었으며, XPath와 키보드 이벤트 처리, 문서를 XML로 직렬화하는 인터페이스가 추가되었다.
HTML5는 2014년 10월에 공개되었으며, HTML5의 일부가 DOM Level 2 HTML 모듈을 대체했다.
DOM Level 4는 2015년에 공개되었으며, 2020년 11월에 폐지되었다.^[28]
[https://dom.spec.whatwg.org/review-drafts/2020-06/ DOM 2020-06]은 2021년 9월에 W3C 권고안으로 공개되었으며, WHATWG 리빙 스탠다드의 스냅샷이다.^[29]

3. 표준

ECMA스크립트의 표준화 이후, 월드 와이드 웹 컨소시엄(W3C) DOM 워킹 그룹은 표준 DOM 사양의 초안을 만들기 시작했다. 1998년 말, "DOM 레벨 1"이라는 이름의 완성된 사양이 W3C 권고안이 되었다. 2005년에는 W3C DOM의 대부분이 마이크로소프트 인터넷 익스플로러 버전 6 (2001년 출시), 오페라, 사파리, 게코 기반 브라우저 (예: 모질라, 파이어폭스, 시몽키, 카미노)와 같이 ECMA스크립트를 지원하는 일반적인 브라우저에서 잘 지원되었다.

W3C DOM 워킹 그룹은 2004년에 최종 권고안을 발표하고 해산했다. 이후 DOM 표준 개발은 WHATWG로 이관되었으며, WHATWG는 DOM Living Standard를 지속적으로 업데이트하고 있다.^[5]

DOM은 그 기원으로부터 HTML을 비롯한 웹 프로그래밍 기술과의 관계가 매우 깊다. 현재는 보다 일반화된 "문서"를 트리 구조로 취급하는 사양으로 정의되어 있다.

과거 브라우저 간의 DOM 구현 차이로 인해 상호 운용성 문제가 발생하기도 했다. 특히, 마이크로소프트의 인터넷 익스플로러가 사실상의 표준 웹 브라우저 위치를 차지하고 있었기 때문에, 모질라와 같이 표준을 준수하는 브라우저 개발에 어려움을 겪었다. 개발자가 마이크로소프트의 DOM 확장을 사용하면 표준 준수에 대한 신뢰성을 잃을 수 있었고, 반대로 비표준 확장을 사용하지 않으면 기능적 제약으로 인해 사용자가 이탈할 수 있었다.

3. 1. DOM 레벨 1

월드 와이드 웹 컨소시엄(W3C) DOM 워킹 그룹은 표준 DOM 사양의 초안화를 시작하여, 1998년 말 "DOM 레벨 1"이라는 이름의 완성된 사양을 W3C 권고안으로 발표하였다.^[24] DOM 레벨 1은 HTML 또는 XML 문서 전체의 완전한 모델을 제공하며, 문서의 임의의 부분을 변경하는 수단도 포함하고 있었다. 2005년에 W3C DOM의 대부분은 ECMA스크립트를 지원하는 주요 웹 브라우저들에서 잘 지원되었는데, 여기에는 마이크로소프트 인터넷 익스플로러 버전 6(2001년부터), 오페라, 사파리, 게코 기반 브라우저(예: 모질라, 파이어폭스, 시몽키, 카미노) 등이 포함된다.

3. 2. DOM 레벨 2

W3C DOM 워킹 그룹은 표준 DOM 사양의 초안화를 시작하여 1998년 말 "DOM 레벨 1"이라는 이름의 완성된 사양을 W3C 권고안으로 만들었다. 2000년 후반에 공개된 DOM 레벨 2는 `getElementById` 함수와 이벤트 모델, XML 네임스페이스 및 CSS 지원을 도입하였다.^[28] 2005년, W3C DOM의 대부분은 마이크로소프트 인터넷 익스플로러 버전 6(2001년부터), 오페라, 사파리, 게코 기반 브라우저(예: 모질라, 파이어폭스, 시몽키, 카미노)를 포함한 공통 ECMA스크립트 지원 브라우저들에서 양호하게 지원되었다.

3. 3. DOM 레벨 3

DOM 레벨 3는 2004년 4월에 공개되었으며, XPath와 키보드 이벤트 처리, 문서를 XML로 직렬화하는 인터페이스가 추가되었다.^[24]

3. 4. DOM 레벨 4

W3C DOM 워킹 그룹은 최종 권고안을 발표하고 2004년에 해산했다. 개발 노력은 WHATWG로 이전되었으며, WHATWG는 계속해서 활성 표준을 유지하고 있다.^[5] 2009년, 웹 애플리케이션 그룹은 W3C에서 DOM 활동을 재편성했다.^[6] 2013년, 진척 부족과 HTML5의 임박한 출시에 따라 DOM Level 4 사양은 완료를 서두르기 위해 HTML 워킹 그룹으로 재할당되었다.^[7] 2015년에는 웹 애플리케이션 그룹이 해산되었고 DOM 관리는 웹 플랫폼 그룹으로 넘어갔다.^[8] 2015년 DOM Level 4가 발표되면서 W3C는 WHATWG 표준의 스냅샷을 기반으로 새로운 권고안을 만들고 있다. DOM Level 4는 2015년에 공개되었으며, 2020년 11월에 폐기되었다.^[9]

3. 5. HTML5

W3C이 2014년 10월에 발표한 HTML5는 DOM 레벨 2 HTML 모듈을 대체했다.^[9] HTML5는 HTML 문서에 대한 DOM 표준을 포함한다.

4. 애플리케이션

DOM은 1990년대 말 웹 브라우저의 자바스크립트 엔진에 널리 구현된 최초의 스크립트 언어들인 자바스크립트와 J스크립트의 역사, 그리고 넷스케이프 내비게이터와 인터넷 익스플로러 간 브라우저 전쟁의 역사와 뒤얽혀 있다.

자바스크립트는 1995년 넷스케이프 커뮤니케이션스에 의해 넷스케이프 내비게이터 2.0과 함께 출시되었다. 넷스케이프의 경쟁사 마이크로소프트는 자바스크립트의 재구현체인 JScript와 더불어 인터넷 익스플로러 3을 이듬해 출시하였으며, 이 두 언어는 초기에는 "DOM 레벨 0" 또는 "레거시 DOM"으로 불렸다. 이 버전에서는 사용자가 생성한 이벤트를 감지하고 HTML 문서를 수정하는 기능에 제한이 있었다.

1997년, 넷스케이프와 마이크로소프트는 각각 넷스케이프 내비게이터 4.0과 인터넷 익스플로러 4.0을 출시하면서 동적 HTML(DHTML) 기능을 지원하였다. 그러나 각 브라우저 개발사가 병렬로 개발했기 때문에 서로 호환되지 않았다. 이러한 버전들은 "중간 DOM"(Intermediate DOM)이라고 불린다.

ECMA스크립트의 표준화 이후 W3C DOM 워킹 그룹은 표준 DOM 사양의 초안을 만들기 시작하였다. "DOM 레벨 1"이라는 이름의 완성된 사양은 1998년 말 W3C 권고안이 되었다. 2005년, W3C DOM의 대부분은 마이크로소프트 인터넷 익스플로러 6, 오페라, 사파리, 게코 기반 브라우저(예: 모질라, 파이어폭스, 시몽키, 카미노) 등 공통 ECMA스크립트 지원 브라우저들에 의해 잘 지원되었다.

4. 1. 웹 브라우저

웹 브라우저는 레이아웃 엔진을 사용하여 HTML을 DOM 트리로 파싱하고, 이를 기반으로 화면에 웹 페이지를 표시한다.^[11] 일부 브라우저는 DOM이 반드시 트리 구조일 필요는 없다는 다른 내부 모델을 사용하기도 한다.^[12]

4. 2. 자바스크립트

자바스크립트는 문서 객체 모델(DOM)을 통해 HTML 문서의 요소, 속성, CSS 스타일 등을 조작하고, 이벤트를 처리하여 동적 웹 페이지를 구현한다.^[13] 자바스크립트는 DOM을 통해 웹 페이지를 로드할 때 다음과 같은 작업을 수행할 수 있다.^[13]

모든 HTML 요소 및 속성을 추가, 변경 및 제거
모든 CSS 스타일 변경
기존 모든 이벤트에 반응
새로운 이벤트 생성

웹 브라우저용 스크립트 언어로 탄생한 자바스크립트는 DOM과 밀접한 관계를 맺고 있다.^[23] 웹 브라우저는 DOM을 구현하고 `document` 객체 등을 통해 자바스크립트에 DOM 접근을 제공한다. 웹 앱은 HTML로 작성된 문서를 DOM을 통해 조작하고, 자바스크립트로 애플리케이션 동작을 구현한다.

DOM은 자바스크립트(ECMA스크립트)와 분리된 사양이다. 자바스크립트는 Node.js와 같은 비 브라우저 환경에서도 완벽하게 동작하며 널리 사용된다. 자바스크립트 관점에서 DOM 조작은 `document` 객체 조작이며, 자바스크립트 사양의 객체 조작일 뿐이다. DOM은 언어에 의존하지 않는 인터페이스 사양이므로, 자바스크립트 외 다른 언어로도 DOM 조작이 가능하다.

5. DOM 트리 구조

문서 객체 모델(DOM)은 HTML이나 XML 문서의 계층적 표현이다. 문서 자체인 루트 노드와 문서의 요소, 속성 및 텍스트 내용을 나타내는 일련의 자식 노드로 구성된다. 트리의 각 노드는 루트 노드를 제외하고 부모 노드를 가지며, 여러 개의 자식 노드를 가질 수 있다.^[22]

DOM은 마크업된 리소스('''Document''')를 리소스 요소('''Object''')의 트리 구조('''Model''')로 표현하여 조작할 수 있도록 한다. DOM에서 객체는 통칭하여 '''''Node'''''라고 불린다. Node는 중첩 구조를 가지므로, 이를 트리 구조 (부모 Node와 자식 Node의 중첩 구조)로 모델링할 수 있다.

다음은 DOM을 설명하는 예시이다.

```html

<제목>DOM이란 무엇인가

<본문>

<한줄요약>

DOM이란 문서를 객체의 트리 구조로 나타낸 것이다.

<상세>

즉 마크업된 리소스를 요소 객체의 중첩 구조로 모델링한 것이다.

객체의 예로

<리스트>Element

<리스트>Text

<리스트>Comment

가 있다.

```

node는 프로그램에서 액세스 가능한 객체이며, 이 DOM에서 정의된 node tree를 조작함으로써 Document를 프로그램에서 조작할 수 있다.^[22] 예를 들어 새로운 node를 추가하거나, 특정 node를 검색하여 내용을 얻는 것(한 줄 요약의 Text를 가져오는 것)이 가능하다.

5. 1. 요소 노드

HTML 또는 XML 문서의 요소는 DOM 트리에서 요소 노드로 표현된다.^[22] 각 요소 노드에는 태그 이름과 속성이 있으며, 다른 요소 노드나 텍스트 노드를 자식으로 포함할 수 있다.

예시 HTML 문서:

```html

내 웹사이트

환영합니다

이것은 내 웹사이트입니다.

```

위 HTML 문서는 DOM 트리에서 다음과 같이 표현된다.

문서 (루트)
html
head
title
"내 웹사이트"
body
h1
"환영합니다"
p
"이것은 내 웹사이트입니다."

node는 프로그램에서 액세스 가능한 객체이며, DOM에서 정의된 node tree를 조작함으로써 Document를 프로그램에서 조작할 수 있다.^[22] 예를 들어 새로운 node를 추가하거나, 특정 node를 검색하여 내용을 얻는 것이 가능하다.

5. 2. 텍스트 노드

요소 내의 텍스트 내용은 DOM 트리에서 텍스트 노드로 표현된다. 텍스트 노드는 속성이나 자식 노드를 가지지 않으며, 항상 트리의 리프 노드이다.^[21] 예를 들어, title 요소의 텍스트 내용 "My Website"와 h1 요소의 "Welcome"은 모두 텍스트 노드로 표현된다.

5. 3. 속성

요소의 속성은 DOM 트리의 요소 노드에서 속성으로 표현된다.^[21] 예를 들어, 다음과 같은 HTML을 가진 요소가 있다.

```html

링크

```

이 요소는 DOM 트리에서 다음과 같이 표현된다.^[22]

```text

a
href: "https://example.com"
"링크"

```

DOM은 Document(마크업이 된 모든 리소스: 일기에서 논문, 인터랙티브 웹 앱까지)를 대상으로 한다. 마크업은 문장의 일부에 의미를 부여하거나 구조를 나타내기 위해 부여되는 문자열이다. 즉 DOM은 마크업으로 구조를 가진 리소스를 대상으로 한다.

DOM은 Document를 객체의 트리 구조로 표현한다. Document 내에는 마크업으로 구분되는 덩어리가 있으며, 각 덩어리를 특정 종류의 '''객체'''로 표현한다. DOM에서 객체는 통칭하여 '''''Node'''''라고 불린다. Node는 중첩 구조를 가지므로, 이를 트리 구조 (부모 Node와 자식 Node의 중첩 구조)로 모델링할 수 있다. 이처럼 DOM은 마크업된 덩어리/객체의 트리 구조 모델을 통해 문서를 표현한다.

다음은 DOM을 설명하는 문장에 각 부분이 의미하는 내용을 마크업한 것이다.

```html

<제목>DOM이란 무엇인가

<본문><한 줄 요약>DOM이란 문서를 객체의 트리 구조로 나타낸 것이다.<상세>즉 마크업된 리소스를 요소 객체의 중첩 구조로 모델링한 것이다. 객체의 예로 <리스트>Element<리스트>Text<리스트>Comment가 있다.

```

이 Document를 트리 구조로 표현하면 다음과 같다.

```html

<제목>DOM이란 무엇인가

<본문>

<한 줄 요약>

DOM이란 문서를 객체의 트리 구조로 나타낸 것이다.

<상세>

즉 마크업된 리소스를 요소 객체의 중첩 구조로 모델링한 것이다.

객체의 예로

<리스트>Element

<리스트>Text

<리스트>Comment

가 있다.

```

또한 각 요소를 Object로 표현함으로써 DOM의 node tree 표현을 다음과 같이 얻을 수 있다.

node는 프로그램에서 액세스 가능한 객체이며, 이 DOM에서 정의된 node tree를 조작함으로써 Document를 프로그램에서 조작할 수 있다. 예를 들어 새로운 node를 추가하거나, 특정 node를 검색하여 내용을 얻는 것이 가능하다.

6. DOM 조작

DOM 트리는 자바스크립트나 다른 프로그래밍 언어를 사용하여 조작할 수 있다. 일반적인 DOM 조작에는 트리 탐색, 노드 추가/제거/수정, 노드 속성 가져오기/설정 등이 있다. DOM API는 이러한 작업을 위한 `getElementById`, `createElement`, `appendChild`, `innerHTML`과 같은 메서드와 속성을 제공한다.^[23]

다음은 자바스크립트 코드로 DOM을 조작하는 예시이다.

// 루트 요소 생성

var root = document.createElement("root");

// 자식 요소 생성

var child = document.createElement("child");

// 자식 요소를 루트 요소에 추가

root.appendChild(child);

`innerHTML` 속성을 사용하여 HTML 코드를 문자열로 삽입하여 요소와 자식을 생성할 수도 있다.

document.getElementById("root").innerHTML = "";

jQuery, AngularJS, React, Vue.js 등과 같은 자바스크립트 라이브러리나 프레임워크를 사용하면 DOM 조작을 더 편리하고, 간결하며, 효율적으로 수행할 수 있다.

XML이나 JSON 데이터에서 자바스크립트 메서드를 사용하여 데이터를 파싱하고, 그에 따라 노드를 생성하여 DOM 구조를 만드는 것도 가능하다.

DOM 구조를 생성하는 것은 웹 페이지에 바로 표시되는 것이 아니라 메모리에만 존재한다. 렌더링을 위해서는 문서 body나 특정 컨테이너에 추가해야 한다.

DOM의 목적 중 하나는 문서를 프로그램에서 해석하고 조작할 수 있도록 하는 것이다. 자바스크립트는 웹 브라우저용 스크립트 언어로 탄생했기 때문에, 자바스크립트와 DOM은 밀접한 관계를 가진다.^[23] 웹 브라우저는 DOM을 구현하고 `document` 객체 등을 통해 자바스크립트에 DOM 접근을 제공한다. 웹 앱은 HTML로 작성된 문서를 DOM을 통해 조작하고, 자바스크립트로 애플리케이션 동작을 구현한다.

DOM은 자바스크립트(ECMAScript)와 분리된 사양이다. 자바스크립트는 Node.js를 비롯한 비 브라우저 환경(DOM 부재)에서도 완벽하게 동작하며 널리 이용된다. 자바스크립트 관점에서 DOM 조작은 단지 `document` 객체 조작이며, 자바스크립트 사양에서의 객체 조작일 뿐이다. 또한 DOM은 언어에 의존하지 않는 인터페이스 사양이며, 실제로 자바스크립트 이외의 언어로도 DOM 조작이 이루어지고 있다.

7. 구현체

DOM의 다양한 구현체들이 존재하며, 웹 브라우저마다 서로 다른 레이아웃 엔진을 사용한다.

웹 브라우저들은 HTML을 DOM으로 구문 분석하기 위해 레이아웃 엔진에 의존한다. 트라이던트/MSHTML처럼 특정 브라우저에 주로 또는 독점적으로 사용되는 레이아웃 엔진도 있고, Blink, WebKit, Gecko처럼 구글 크롬, 오페라, 사파리, 파이어폭스 등 여러 브라우저에서 공유되는 레이아웃 엔진도 있다. 레이아웃 엔진에 따라 DOM 표준을 준수하는 정도가 다르다.

DOM은 모든 방향(예: 부모 및 이전 형제)으로 탐색을 지원하고 임의의 수정을 허용하므로, 구현은 일반적으로 문서를 버퍼링한다.^[14] 그러나 DOM은 직렬화된 문서에서 시작할 필요 없이 DOM API로 즉석에서 생성될 수도 있다.

다양한 DOM 구현 라이브러리 목록은 다음과 같다.

libxml2
MSXML
제르세스(Xerces)
[https://docs.python.org/3/library/xml.dom.html xml.dom]
XML for <SCRIPT>^[16]
[https://github.com/PhpGt/Dom PHP.Gt DOM]^[17]
[https://github.com/fgnass/domino/ Domino]
[https://github.com/wooly905/SimpleHtmlDom/ SimpleHtmlDom]

7. 1. 레이아웃 엔진

웹 브라우저는 HTML을 DOM으로 구문 분석하기 위해 레이아웃 엔진에 의존한다. 일부 레이아웃 엔진(예: 트라이던트/MSHTML)은 Internet Explorer와 같이 특정 브라우저와 주로 또는 독점적으로 관련되어 있다. 다른 레이아웃 엔진(예: Blink, WebKit, Gecko)은 구글 크롬, 오페라, 사파리, 파이어폭스와 같은 여러 브라우저에서 공유된다. 서로 다른 레이아웃 엔진은 DOM 표준을 다양한 수준으로 준수한다.

7. 2. 라이브러리

다음은 다양한 DOM 구현 라이브러리 목록이다.

libxml2
MSXML
제르세스(Xerces): C++, Java 및 Perl로 작성된 DOM 구현 모음
[https://docs.python.org/3/library/xml.dom.html xml.dom] for 파이썬
XML for <SCRIPT>: JavaScript 기반 DOM 구현^[16]
[https://github.com/PhpGt/Dom PHP.Gt DOM]: libxml2 기반 서버 측 DOM 구현. PHP 프로그래밍 언어에 DOM 레벨 4 호환성 제공^[17]
[https://github.com/fgnass/domino/ Domino]: Mozilla의 dom.js 기반 서버 측(Node.js) DOM 구현. 미디어위키 스택에서 시각 편집기와 함께 사용
[https://github.com/wooly905/SimpleHtmlDom/ SimpleHtmlDom]: C#으로 작성된 HTML 문서 객체 모델. 프로그래밍 방식으로 HTML 문자열 생성 가능

참조

_[1] 문서
_[2] 웹사이트 Document Object Model (DOM): definition, structure and example https://www.ionos.co[...] 2022-04-21
_[3] 웹사이트 Document Object Model (DOM) http://www.w3.org/DO[...] W3C 2012-01-12
_[4] 웹사이트 JavaScript HTML DOM https://www.w3school[...]
_[5] 웹사이트 DOM Standard https://dom.spec.wha[...] 2016-09-23
_[6] 웹사이트 W3C Document Object Model https://www.w3.org/D[...] 2016-09-23
_[7] 웹사이트 New Charter for the HTML Working Group from Philippe Le Hegaret on 2013-09-30 (public-html-admin@w3.org from September 2013) https://lists.w3.org[...] 2016-09-23
_[8] 웹사이트 PubStatus - WEBAPPS https://www.w3.org/2[...] 2016-09-23
_[9] 웹사이트 W3C DOM4 publication history https://www.w3.org/s[...] 2020-11-03
_[10] 웹사이트 DOM publication history https://www.w3.org/s[...] 2021-09-28
_[11] 웹사이트 What is the Document Object Model? https://www.w3.org/T[...] W3C 2021-09-12
_[12] 웹사이트 Modernizing the DOM tree in Microsoft Edge https://blogs.window[...] Microsoft 2021-09-12
_[13] 웹사이트 JavaScript HTML DOM https://www.w3school[...] 2016-09-23
_[14] 서적 Ajax Black Book, New Edition (With Cd) https://books.google[...] Dreamtech Press
_[15] 간행물 Data processing system and method for representing, generating a representation of and random access rendering of electronic documents
_[16] 웹사이트 XML for